<template> 
	<view class="detail-body">
		<comHeader :config="navConfig"/>
		<view class="header">
			<image class="header-bg" src="/static/banner.png" mode=""></image>
			<view class="play" @click="toRoomPos"></view>
			<view class="p-num" @click="play">
				<image src="/static/tupian.png" mode="aspectFit"></image>
				<text>10</text>
			</view>
			<view class="p-num" style="top: 234upx;">
				<image class="VR-img" src="/static/360VR.png" mode="aspectFit"></image>
			</view>
			<!-- <view class="back" @click="back">
				<image src="/static/fanhui.png" ></image>
			</view> -->
			<view class="header-bottom">
			</view>
		</view>
		<view class="detailbody">
			<view class="detailarea" style="">
				<view class="spot-title">
					<text class="spot-title-text">半山泉</text>
					<text class="spot-title-state">维修中</text>
					<view style="float: right;padding: 20upx;margin-top: -20upx;" @click="togglePopup('bottom','share')">
						<!-- <text class="fenxiang">分享</text> -->
						<image class="fenxiang-img" src="/static/fenxiang.png" mode=""></image>
					</view>
				</view>
				<view class="spot-info">
					<text class="spot-info-label">等待浏览人数：<text class="spot-info-num">23人</text></text>
					<text class="spot-info-label">预计等待：<text class="spot-info-num">23分钟</text></text>
				</view>
				<view class="spot-wait">
					<text class="spot-info-label">每轮人数：<text class="spot-info-num">8人</text></text>
					<view class="dui">立即排队</view>
					<view class="daohang">立即导航</view>
				</view>
				<view class="video">
					<view class="spot-title">
						<text  class="spot-title-text">语音导览</text>
						<image class="play" src="/static/map/play.png" mode="" @click="toAudio"></image>
						<view class="en" :class="lanIndex==1?'lan-ac':''" @click="chooseLan(1)">English</view>
						<view class="zh " :class="lanIndex==0?'lan-ac':''"  @click="chooseLan(0)">普通话</view>
					</view>
					
					<view class="audio-box">
						<!-- <audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name" :author="current.author" :action="audioAction" controls></audio> -->
					</view>
					
				</view>
				<view class="spot-des">
					<view class="spot-item" v-for="(item,index) in spotData" :key='index'>
						<view class="des-head" @click="chooseDes(index)">
							<view class="dot"></view>
							<text class="spot-des-title">{{item.title}}</text>
							<image class="spot-des-open" :class="desIndex==index?'des-ac':''" src="/static/jiantou.png" mode=""></image>
						</view>
						<view v-if="desIndex == index" class="spot-des-des">
							<text>{{item.des}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 分享弹窗 -->
		<uni-popup ref="share" :type="type" :custom="true">
			<view class="uni-share">
				<view class="uni-share-title">分享到</view>
				<view class="uni-share-content">
					<view v-for="(item, index) in bottomData" :key="index" class="uni-share-content-box">
						<view class="uni-share-content-image">
							<image :src="item.icon" class="image" />
						</view>
						<view class="uni-share-content-text">{{ item.text }}</view>
					</view>
				</view>
				<view class="uni-share-btn"  @click="cancel('share')">取消分享</view>
			</view>
		</uni-popup>
		<audioPlayer ref='audio1' v-if='showAudio' />
		<SpotBottom />
	</view>
</template>

<script>
	import audioPlayer from '@/components/audioPlayer.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import SpotBottom from '@/components/SpotBottom.vue'
	export default{
		data(){
			return{
				navConfig:{
					isFixed:false,
					comScroll:200,
					left:{
						text:'',
						isShowLeft:true,
						leftGobackColor:'#ffffff',
						leftTextColor:'',
					},
					mid:{
						isShowMid:false,
						text:''
					},
					right: {
						text: '',
						textColor: '',
						isShowRight: true,
						ico: '/static/map/download.png', //右侧图标地址
						isShowRightIco: false ,//是否显示右侧图标
						ico2: '/static/map/msg.png', //右侧图标地址
						isShowRightIco2: true //是否显示右侧图标
					}
				},
				bottomData: [
					{
						text: '微信',
						icon: '/static/audio/fx-wx.png',
						name: 'wx'
					},
					{
						text: '朋友圈',
						icon: '/static/audio/fx-friend.png',
						name: 'pyq'
					},
					{
						text: 'QQ',
						icon: '/static/audio/fx-qq.png',
						name: 'qq'
					},
					{
						text: 'QQ空间',
						icon: '/static/audio/fx-qqzone.png',
						name: 'qqkj'
					}
					
				],
				desIndex:0,
				lanIndex:0,
				showAudio:false,
				type: '',//uniPopup组件类型
				spotData:[
					{
						title:'历史文化',
						des:'	清新观景台，在清新大道中轴线北端与环城路交汇处的花尖山脚，建设一座高度100米的观景台，观景台的建设成为清新城市建设一大亮点,据介绍，观景台是松林生态公园的主体设施，设计有瀑布、浮雕、凉亭和名贵花草树木。站在观景台上可鸟瞰清远市区和清新县全景。',
					},
					{
						title:'地理文化',
						des:'	清新观景台，在清新大道中轴线北端与环城路交汇处的花尖山脚，建设一座高度100米的观景台，观景台的建设成为清新城市建设一大亮点,据介绍，观景台是松林生态公园的主体设施，设计有瀑布、浮雕、凉亭和名贵花草树木。站在观景台上可鸟瞰清远市区和清新县全景。',
					},
					{
						title:'文化故事',
						des:'	清新观景台，在清新大道中轴线北端与环城路交汇处的花尖山脚，建设一座高度100米的观景台，观景台的建设成为清新城市建设一大亮点,据介绍，观景台是松林生态公园的主体设施，设计有瀑布、浮雕、凉亭和名贵花草树木。站在观景台上可鸟瞰清远市区和清新县全景。',
					},
				],
				current: {
					author: '暂无',
					src: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/music.mp3',
				},
				audioAction: {
					method: 'pause'
				}
			}
		},
		methods: {
			chooseDes(index){
				this.desIndex = index
			},
			chooseLan(index){
				this.lanIndex = index
			},
			
			togglePopup(type,open){
				this.type = type;
				this.$refs[open].open()
				this.showFx = true
				document.body.style.overflow = 'hidden'
			},
			cancel(type) {
				this.showFx = false
				this.$refs[type].close()
				document.body.style.overflow = 'scroll'
			},
			close(){
					//#ifdef APP-PLUS|| MP-WEIXIN
					this.$parent.closeDetail();
					//#endif
					//#ifndef APP-PLUS|| MP-WEIXIN
					this.$parent.$parent.closeDetail();
					//#endif
			},
			toAudio(){
				// this.$store.commit('showAudioPlayerUpdate',{show:true})
				this.showAudio=true
			},
			closeAudio(){
				// this.$store.commit('showAudioPlayerUpdate',{show:true})
				this.showAudio=false
			},
		},
		components:{
			uniPopup,
			audioPlayer,
			SpotBottom
		}
	}
</script>

<style scoped>
	.header{
		width: 750upx;
		height: 575upx;
		position: relative;
	}
	.header-bg{
		width: 750upx;
		height: 575upx;
		position: absolute;
	}
	/* 底部分享 */
	.uni-share {
		background: #fff;
	}
	
	.uni-share-title {
		line-height: 60upx;
		font-size: 24upx;
		padding: 15upx 0;
		text-align: center;
	}
	
	.uni-share-content {
		display: flex;
		flex-wrap: wrap;
		padding: 15px;
	}
	
	.uni-share-content-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 25%;
		box-sizing: border-box;
	}
	
	.uni-share-content-image {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 60upx;
		height: 60upx;
		overflow: hidden;
		border-radius: 10upx;
	}
	
	.uni-share-content-image .image {
		width: 100%;
		height: 100%;
	}
	
	.uni-share-content-text {
		font-size: 26upx;
		color: #333;
		padding-top: 5px;
		padding-bottom: 10px;
	}
	
	.uni-share-btn {
		height: 90upx;
		line-height: 90upx;
		border-top: 1px #f5f5f5 solid;
		text-align: center;
		font-size: 30upx;
		color: #666;
	}
	.back{
		width: 60upx;
		height: 60upx;
		top: 60upx;
		left: 26upx;
		position: absolute;
	}
	.back image{
		width: 30upx;
		height: 36upx;
	}
	.header .play{
		position: absolute;
		top:241upx;
		left:342upx;
		width:0;
		height:0;
		border-top:35.5upx solid transparent;
		border-bottom:35.5upx solid transparent;
		border-left:63upx solid #FFFFFF;
	}
	.p-num{
		width: 125upx;
		height: 58upx;
		top: 147upx;
		right: 0;
		position: absolute;
		background: rgba(0,0,0,0.5);
		border-radius: 30upx 0 0 30upx;
		position: absolute;
	}
	.p-num image{
		width: 26upx;
		height: 26upx;
		margin-left:36upx;
		margin-top: 17upx;
		float: left;
	}
	.VR-img{
		width: 92upx !important;
		height: 32upx !important;
		margin-left:20upx !important;
		margin-top: 13upx !important;
	}
	.p-num text{
		color: #FFFFFF;
		font-size: 24upx;
		line-height: 58upx;
		float: left;
		margin-left: 16upx;
	}
	.header-bottom{
		width: 750upx;
		height: 30upx;
		bottom: 0upx;
		border-radius: 30upx 30upx 0 0;
		background: #FFFFFF;
		position: absolute;
	}
	.detail-body{
		width: 750upx;
		height: auto;
		/* position: fixed; */
		top:0;
		left: 0;
	}
	.detailbody{
		width: 750upx;
		height: auto;
		border-radius: 30upx 30upx 0 0;
		background: #FFFFFF;
		/* position: absolute; */
		/* overflow: scroll; */
		margin-bottom: 110upx;
	}
	.mask{
		width: 750upx;
		height: 100vh;
		position: absolute;
		background: rgba(0,0,0,0.3);
	}
	.detailarea{
		margin-top: 39upx;
		width: 750upx;
		height: auto;
	}
	.spot-title{
		width: 750upx;
		height:  80upx;
		float: left;
		
	}
	.spot-title-text{
		font-size: 34upx;
		margin-left: 28upx;
		float: left;
	}
	.spot-title-state{
		font-size: 20upx;
		margin-left: 18upx;
		color: rgba(255,80,57,1.00);
	}
	.fenxiang-img{
		width: 32upx;
		height: 32upx;
		float: right;
		margin-right: 10upx;
	}
	.fenxiang{
		font-size: 30upx;
		margin-right: 28upx;
		float: right;
		line-height: 30upx;
	}
	.spot-info{
		width: 694upx;
		margin-left: 28upx;
		height: 53upx;
		margin-top: 50upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.spot-wait{
		width: 694upx;
		margin-left: 28upx;
		height: 53upx;
		margin-top: 50upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.spot-info-label{
		font-size: 26upx;
		line-height: 53upx;
	}
	.spot-info-num{
		font-size: 26upx;
		line-height: 53upx;
		color: #54B1FF;
	}
	.dui{
		width: 125upx;
		height: 42upx;
		background-color: #54B1FF;
		color: #FFFFFF;
		text-align: center;
		line-height: 40upx;
		font-size: 22upx;
		border-radius: 50upx;
		margin-left: 245upx;
	}
	.daohang{
		width: 125upx;
		height: 42upx;
		background-color: #54B1FF;
		color: #FFFFFF;
		text-align: center;
		line-height: 40upx;
		font-size: 22upx;
		border-radius: 50upx;
		margin-left: 30upx;
	}
	.video{
		width: 750upx;
		height: 120upx;
		margin-top: 40upx;
	}
	.zh,.en{
		width: 141upx;
		height: 44upx;
		border: #999999 solid 1upx;
		border-radius: 20upx;
		color: #999999;
		text-align: center;
		line-height: 44upx;
		font-size: 28upx;
		float: right;
		margin-top: 6upx;
		margin-left: 26upx;
	}
	.lan-ac{
		border: #54B1FF solid 1upx;
		color: #54B1FF;
		
	}
	.spot-des-open{
		width: 20upx;
		height: 20upx;
		margin-top: 10upx;
		transform: rotate(90deg);
		float: right;
	}
	.des-ac{
		transform: rotate(270deg);
	}
	.play{
		width: 58upx;
		height: 58upx;
		float: right;
		margin-right: 31upx;
		margin-left: 26upx;
	}
	.des-head{
		width: 100%;
		height: 50upx;
	}
	.spot-des{
		width: 750upx;
		height: auto;
	}
	.spot-item{
		width: 694upx;
		margin-left: 28upx;
		height: auto;
		
		margin-top: 20upx;
	}
	.dot{
		width: 6upx;
		height: 6upx;
		border-radius: 50%;
		background: #54B0FF;
		margin-top: 20upx;
		float: left;
	}
	.spot-des-title{
		font-size:32upx;
		margin-left: 10upx;
		float: left;
	}
	.spot-des-des{
		width: 694upx;
		height: auto;
		margin-top: 30upx;
	}
	.spot-des-des text{
		font-size: 26upx;
		text-indent: 52upx;
		display: block;
	}
</style>
